<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      size="medium"
    >
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="ruleForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="ruleForm.sex"
              clearable
              placeholder="请选择"
              filterable
              style="width: 100%"
            >
              <el-option :key="0" label="男" :value="1"></el-option>
              <el-option :key="1" label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="联系方式" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="身份证号" prop="care">
            <el-input v-model="ruleForm.care"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="床位号" prop="floor_str">
            <el-select
              v-model="ruleForm.type"
              clearable
              placeholder="请选择"
              filterable
              style="width: 100%"
            >
              <el-option :key="0" label="瑞福祥老" :value="1"></el-option>
              <el-option :key="1" label="瑞福祥老" :value="2"></el-option>
              <el-option :key="2" label="瑞福祥老" :value="3"></el-option>
              <el-option :key="3" label="瑞福祥老" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="入住状态" prop="status">
            <el-select
              v-model="ruleForm.status"
              clearable
              placeholder="请选择"
              filterable
              style="width: 100%"
            >
              <el-option :key="0" label="住院" :value="1"></el-option>
              <el-option :key="1" label="已离院" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="入住时间" prop="create_time">
            <el-date-picker
              v-model="ruleForm.create_time"
              value-format="yyyy-MM-dd"
              format="yyyy 年 MM 月 dd 日"
              placeholder="选择日期时间"
              :picker-options="dataPickerBeforeTodayOptions"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="ruleForm.remark"
              :rows="5"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-footer">
      <el-button type="primary" class="sureBtn" size="medium" @click="save">
        提 交
      </el-button>
      <el-button type="info" class="setBtn" size="medium" @click="cancel">
        取 消
      </el-button>
    </div>
  </div>
</template>
<script>
  import { isPhone, isIdCard } from "@/utils/validate";
  import { getList } from "@/api/appointmentReg";
  export default {
    name: "Index",
    components: {},
    props: {
      data: {
        type: Object,
        default() {
          return {
            face: "",
            backface: "",
            type: [],
          };
        },
      },
    },
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!isPhone(value)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      };
      const validateCard = (rule, value, callback) => {
        if (!isIdCard(value)) {
          callback(new Error("请输入正确的身份证号"));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          face: "",
          backface: "",
          type: [],
        },
        rules: {
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
          sex: [{ required: true, message: "请选择性别", trigger: "change" }],
          mobile: [
            { required: true, message: "请输入电话", trigger: "blur" },
            { validator: validatePhone, trigger: "blur" },
          ],
          reserve_time: [
            { required: true, message: "请选择时间", trigger: "change" },
          ],
          care: [
            { required: true, message: "请输入身份证号", trigger: "blur" },
            { validator: validateCard, trigger: "blur" },
          ],
        },
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      // console.log(JSON.stringify(this.data));
      if (JSON.stringify(this.data) !== "{}") {
        this.ruleForm = this.data;
      }
    },
    methods: {
      save() {
        this.$refs["ruleForm"].validate(async (valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              getList("put", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$emit("save", this.ruleForm);
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                }
              });
            } else {
              getList("post", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$emit("save", this.ruleForm);
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                }
              });
            }
          }
        });
      },
      cancel() {
        this.$refs["ruleForm"].resetFields();
        this.$emit("cancel", this.ruleForm);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleChange(value) {
        console.log(value);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .el-tabs {
    ::v-deep {
      .el-tabs__header {
        margin-bottom: 24px;
      }
    }
  }

  .el-form-item {
    margin-bottom: 24px;
  }
  .selectClass {
    width: 100%;
  }
  .form-footer {
    padding-left: 100px;
  }
  .diver-title {
    margin-bottom: 24px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
  }
  .tips {
    margin-bottom: 24px;
    padding-left: 100px;
    font-size: 16px;
    color: #ff4d50;
  }
</style>
